<template>
	<div class="topMenu">
		<el-menu
			router
			class="el-menu-demo"
			mode="horizontal"
			:default-active="$route.path"
			:ellipsis="false"
			@select="handleSelect">
			<el-sub-menu index="0" style="width: 200px">
				<template #title>{{ leftName }}</template>
				<template v-for="menuItem in menu" :key="menuItem.id">
					<el-menu-item
						@click="handleSubMenuClick(menuItem)"
						:to="{ name: menuItem.name }">
						{{ menuItem.name }}
					</el-menu-item>
				</template>
			</el-sub-menu>
			<!-- <div class="flex-grow" /> -->
			<template v-for="child in secondaryMenu.data.childs" :key="child.id">
				<!-- :to="{ name: child.id }" -->
				<el-menu-item :index="child.id" @click="handleToHref">
					{{ child.name }}
				</el-menu-item>
			</template>
		</el-menu>
	</div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { userState } from '@/store/module/user';
//从pina拿到菜单数据
const store = userState();
const { menu, userInfo } = store;
//当前选中的菜单
let secondaryMenu = reactive({
	data: menu[0]
});

const router = useRouter();
console.log('useRoute', useRouter().options.routes);
//左侧菜单名字
const leftName = ref(menu[0].name);
//菜单切换事件
const handleSubMenuClick = (menuItem) => {
	//处理菜单
	if (menuItem && menuItem.childs.length > 0) {
		secondaryMenu.data = menuItem;
	}
	//处理左侧菜单名字
	leftName.value = menuItem.name;
};
//处理数据，给他们塞进去路由
const menuList = secondaryMenu.data.childs.filter((i) => i.name !== '系统管理');
const handleSelect = (val) => {
	console.log('val');
};
const handleToHref = () => {
	router.push('/app-vue3');
};
console.log('secondaryMenu', secondaryMenu.data);
</script>

<style lang="scss" scoped>
.flex-grow {
	flex-grow: 1;
}
</style>
